<template>
	<n-dropdown
		:options="options"
		placement="bottom-end"
		size="medium"
		trigger="click"
		show-arrow
		@select="changeLang"
	>
		<n-el tab="div" class="lang">
			<n-icon :size="size" :color="styleMode === 'light' ? color : ''">
				<i class="np-icon-language"></i>
			</n-icon>
		</n-el>
	</n-dropdown>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useStore } from "@/store";
import { availableLocales, langSetting, useI18n } from "../index";
import type { StyleMode } from "@model/store";

withDefaults(
	defineProps<{
		color?: string;
		size?: number;
	}>(),
	{
		color: "#333",
		size: 18,
	},
);
const store = useStore();
const { locale } = useI18n();
const lang = computed<string>(() => store.getters["setting/lang"]);
const styleMode = computed<StyleMode>(() => store.getters["setting/styleMode"]);

const options = computed(() => {
	return availableLocales.map(locale => {
		return {
			key: locale,
			label: langSetting[locale],
			disabled: lang.value === locale,
		};
	});
});

function changeLang(e: string) {
	window.$load?.start();
	locale.value = e;
	store.dispatch("setting/SET_SETTING", { key: "lang", value: e });
	setTimeout(() => {
		window.$load?.finish();
	}, 100);
}
</script>

<style lang="scss" scoped>
.lang {
	width: 100%;
	height: 100%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
